<template>
  <!-- 小组详情 -->
  <div class="groupInfoBox">
    <x-header :left-options="{showBack: true,backText:'小组详情'}" class="headerBox"></x-header>
    <div class="groupHead">
      <div class="bgTitle-pic">
        <img src="../assets/images/background92x.png" />
      </div>
      <div class="groTile-pic">
        <img :src="groupInfo.groupLogo" />
      </div>
      <div class="bgTitle-infobox">
        <div class="bgTile-info">
          <img src="../assets/images/member23.png" />
          成员：{{groupInfo.studentNum}}人
        </div>
        <div class="bgTile-info">
          <img src="../assets/images/topic81.png" />
          话题：{{groupInfo.topic}}人
        </div>
      </div>
      <div class="titleCenter">
        <div class="titleHead">{{groupInfo.title}}</div>
        <div class="titleTime">{{groupInfo.creatTime}}</div>
        <div decode="true" class="titleText">{{groupInfo.introduce}}</div>
        <!-- <div class='titleOut'>退出小组</div> -->
        <div bindtap="secede" class="outGroup" @click="showOutGroup=true">退出小组</div>
      </div>
    </div>
    <!-- 小组成员 -->
    <div class="member">
      <div class="memberGroup">小组成员 (26)</div>
      <div class="memberCard-box">
        <div
          v-if="item.position=='组长'"
          v-for="(item,index) in groupInfo.memberList"
          :key="index"
          class="memberCard"
        >
          <img src="../assets/images/green52x.png" />
          <div class="memberCard-top">
            <img :src="item.headImg" mode="aspectFit" />
            <div class="memberCard-text">
              <div class="memberCard-top-name">{{item.name}}</div>
              <div class="memberCard-top-post flex">
                <img src="../assets/images/head-sm.png" mode="aspectFit" />
                {{item.position}}
              </div>
            </div>
          </div>
          <div class="memberCard-bottom">
            <div class="memberCard-att">
              <div>{{item.attention}}</div>
              <div>关注</div>
            </div>
            <div class="memberCard-att">
              <div>{{item.fans}}</div>
              <div>粉丝</div>
            </div>
            <div class="memberCard-btn memberCard-btnG">
              <img src="../assets/images/attention30.png" />
              关注
            </div>
          </div>
        </div>
        <div
          v-if="item.position=='副组长'"
          v-for="(item,index) in groupInfo.memberList"
          :key="index"
          class="memberCard"
        >
          <img src="../assets/images/orange62x.png" />
          <div class="memberCard-top">
            <img src="../assets/images/headportrait452.png" mode="aspectFit" />
            <div class="memberCard-text">
              <div class="memberCard-top-name">罗晓飞</div>
              <div class="memberCard-top-post flex">
                <img src="../assets/images/head-sm32.png" mode="aspectFit" />
                副组长
              </div>
            </div>
          </div>
          <div class="memberCard-bottom flex">
            <div class="memberCard-att">
              <div>12</div>
              <div>关注</div>
            </div>
            <div class="memberCard-att">
              <div>3894</div>
              <div>粉丝</div>
            </div>
            <div class="memberCard-btn memberCard-btnY">
              <img src="../assets/images/attention30.png" />
              关注
            </div>
          </div>
        </div>
      </div>
      <div class="memberAll">全部成员</div>
      <template v-for="(item,index) in groupInfo.memberList">
        <div
          v-if="fold?item.position=='成员':item.position=='成员'&&index<=3"
          class="memberAll-list"
          :key="index"
        >
          <div class="memberAll-list-left">
            <div class="picture">
              <img :src="item.headImg" mode="scaleToFill" />
            </div>
            <div class="memberList-type">
              <div class="memberList-type-title">{{item.name}}</div>
              <div class="memberList-type-att">
                <div>关注：</div>
                <div>{{item.attention}}人</div>
                <div>粉丝：</div>
                <div>{{item.fans}}人</div>
              </div>
              <div class="memberList-type-per">
                <img src="../assets/images/head-sm41.png" />
                成员
              </div>
            </div>
          </div>
          <div class="memberList-btn">
            <img src="../assets/images/attention02.png" />
            关注
          </div>
        </div>
        <div v-if="fold?item.position=='成员':item.position=='成员'&&index<=3" class="wire"></div>
      </template>
      <div v-if="!fold" class="unfold" @click="fold=!fold">
        点击展开
        <img src="../assets/images/unfold02.png" />
      </div>
      <div v-else class="unfold" @click="fold=!fold">
        点击折叠
        <img src="../assets/images/unfold02.png" class="active" />
      </div>
    </div>
    <!-- 小组话题-->
    <div class="topic">
      <div class="topicTitle">
        <div class="topicTitle-left">小组话题(10)</div>
        <div class="topicTitle-right">
          全部话题
          <img src="../assets/images/unfold02.png" />
        </div>
      </div>
      <!-- 小组话题内容 -->
      <div class="topicContent">
        <div class="topicImg">
          <img src="../assets/images/headportrait452.png" mode="aspectFit" />
          <div>4</div>
        </div>
        <div class="topicContent-right">
          <div class="topicContent-title">
            <div class="topicContent-name">高慧雯</div>
            <div class="topicContent-class">高一三班</div>
          </div>
          <div class="topicContent-text">作文内容如何紧贴现代生活，新颖别致，把握时代脉搏，尽显时代气息呢？</div>
          <div class="answer">
            <div class="answer-top">
              <div class="answer-top-left">共有3个回答</div>
              <div class="answer-top-right">
                <img src="../assets/images/answer98.png" />
              </div>
            </div>
            <div class="answerContent">
              <div class="answerContent-left">
                <img src="../assets/images/head01.png" mode="aspectFit" />
              </div>
              <div class="answerContent-right">
                <div class="answerContent-rightTitle">
                  <div class="answerContent-name">高慧雯</div>
                  <div class="answerContent-time">12-25 18:19</div>
                </div>
                <div class="answerContent-text clearfix">
                  <div>回复</div>
                  <router-link to class="answerContent-textName">@木子老师</router-link>
                  <div>:作文内容如何紧爽肤水水电费水电费是</div>
                </div>
              </div>
            </div>
            <div class="answerContent">
              <div class="answerContent-left">
                <img src="../assets/images/head01.png" mode="aspectFit" />
              </div>
              <div class="answerContent-right">
                <div class="answerContent-rightTitle">
                  <div class="answerContent-name">高慧雯</div>
                  <div class="answerContent-time">12-25 18:19</div>
                </div>
                <div class="answerContent-text">
                  <div>回复</div>
                  <router-link to class="answerContent-textName">@木子老师</router-link>
                  <div>:作文内容如何紧爽肤水水电费水电费是</div>
                </div>
              </div>
            </div>
            <div class="answerContent">
              <div class="answerContent-left">
                <img src="../assets/images/head01.png" mode="aspectFit" />
              </div>
              <div class="answerContent-right borderNone">
                <div class="answerContent-rightTitle">
                  <div class="answerContent-name">高慧雯</div>
                  <div class="answerContent-time">12-25 18:19</div>
                </div>
                <div class="answerContent-text">
                  <div>回复</div>
                  <router-link to class="answerContent-textName">@木子老师</router-link>
                  <div>:作文内容如何紧爽肤水水电费水电费是</div>
                </div>
              </div>
            </div>

            <div class="viewMore flex">
              查看更多
              <div>>></div>
            </div>
          </div>
          <div class="topicContent-foot">
            <div class="topicContent-footTime">12-25 18:19</div>
            <img src="../assets/images/Reply12x.png" />
          </div>
        </div>
      </div>
      <div class="topicContent">
        <div class="topicImg news">
          <img src="../assets/images/head01.png" mode="aspectFit" />
          <div>4</div>
        </div>
        <div class="topicContent-right">
          <div class="topicContent-title">
            <div class="topicContent-name">高慧雯</div>
            <div class="topicContent-class">高一三班</div>
          </div>
          <div class="topicContent-text">作文内容如何紧贴现代生活，新颖别致，把握时代脉搏，尽显时代气息呢？</div>
          <div class="answer">
            <div class="answer-top">
              <div class="answer-top-left">共有3个回答</div>
              <div class="answer-top-right">
                <img src="../assets/images/answer32.png" />
              </div>
            </div>
          </div>
          <div class="answerCourse">
            <div class="answerCourse-left">
              <div>来自课程：</div>
              <div>《爱语文，做有修养的人》</div>
            </div>
            <div class="answerCourse-right">
              <img src="../assets/images/img02.png" />
            </div>
          </div>
          <div class="topicContent-foot">
            <div class="topicContent-footTime">12-25 18:19</div>
            <img src="../assets/images/Reply12x.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- 退出小组弹框 -->
    <confirm v-model="showOutGroup" title="退出小组" @on-confirm="onConfirm">
      <p style="text-align:center;">你确定要离开小组吗?要不要在考虑一下呢?</p>
    </confirm>
  </div>
</template>

<script>
import { XHeader, Confirm } from "vux";
export default {
  components: {
    XHeader,
    Confirm
  },
  data() {
    return {
      fold: false,
      showOutGroup: false,
      groupInfo: {
        studentNum: '26',
        topic: '10',
        groupLogo: require('../assets/images/head06.png'),
        title: '高中英语讨论小组',
        creatTime: '2018年10月12日',
        introduce: '发挥群体的积极功能，提高个体的学习动力和能力,达到完成特定的教学任务的目的，改变教师垄断整体课堂的信息源而学生处于被动地位的局面，从而激发了学生d的主动性、创造性，也因此得到充分的发挥。',
        memberList: [
          {
            headImg: require('../assets/images/headportrait452.png'),
            name: '罗小黑',
            position: '组长',
            attention: '12',
            fans: '3155',
          },
          {
            headImg: require('../assets/images/headportrait452.png'),
            name: '罗小黑',
            position: '副组长',
            attention: '12',
            fans: '3155',
          },
          {
            headImg: require('../assets/images/head02.png'),
            name: '罗小黑',
            position: '成员',
            attention: '12',
            fans: '355',
          },
          {
            headImg: require('../assets/images/head02.png'),
            name: '罗小黑',
            position: '成员',
            attention: '12',
            fans: '355',
          },
          {
            headImg: require('../assets/images/head02.png'),
            name: '罗小黑',
            position: '成员',
            attention: '12',
            fans: '355',
          },
          {
            headImg: require('../assets/images/head02.png'),
            name: '罗小黑',
            position: '成员',
            attention: '12',
            fans: '355',
          },
        ]
      }
    }
  },
  methods: {
    onConfirm() {
      //退出
    }
  }
}
</script>

<style lang="less" scoped>
.groupInfoBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
  // 小组介绍
  .groupHead {
    .bgTitle-pic {
      width: 100%;
      height: 260px;
      margin-top: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .groTile-pic {
      width: 200px;
      height: 200px;
      background-color: #fff;
      padding: 10px;
      border-radius: 20px;
      position: absolute;
      top: 150px;
      left: 30px;
      z-index: 30;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .bgTitle-infobox {
      position: absolute;
      top: 200px;
      left: 250px;
      z-index: 30;
      display: flex;
      .bgTile-info {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 30px;
        margin-left: 20px;
        img {
          width: 30px;
          height: 30px;
          margin: 0 10px;
        }
      }
    }

    .titleCenter {
      background-color: #fff;
      width: 100%;
      border-bottom: 20px solid #f8f9fa;
      overflow: hidden;
      border-radius: 30px 30px 0 0;
      position: absolute;
      top: 250px;
      padding: 150px 26px 0px 26px;
      box-sizing: border-box;
      .titleHead {
        font: bold 32px '微软雅黑';
      }
      .titleTime {
        margin: 20px 0;
        font-size: 30px;
      }
      .titleText {
        font-size: 26px;
        color: #5d5d5d;
        text-indent: 2em;
      }
      .outGroup {
        background-color: #4ba6ff;
        color: #fff;
        width: 250px;
        height: 80px;
        font-size: 28px;
        border-radius: 50px;
        margin: 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  // 成员列表
  .member {
    background-color: #fff;
    margin-top: 500px;
    padding: 0px 26px 0 26px;
    .memberGroup {
      font: bold 32px '微软雅黑';
      padding: 30px 0;
    }
    .memberCard-box {
      display: flex;
      flex-wrap: nowrap;
      height: 240px;
      .memberCard {
        flex: 1;
        display: inline-block;
        position: relative;
        color: #fff;
        box-shadow: 15px 15px 20px #c5f2e6;
        img {
          width: 100%;
          height: 240px;
        }
        .memberCard-top {
          position: absolute;
          top: 20px;
          left: 20px;
          display: flex;
          align-items: center;
          img {
            width: 100px;
            height: 100px;
          }
          .memberCard-text {
            margin-left: 30px;
            line-height: 60px;
            .memberCard-top-name {
              font-size: 38px;
            }
            .memberCard-top-post {
              font-size: 30px;
              img {
                width: 24px;
                height: 30px;
                margin-right: 10px;
              }
            }
          }
        }
        .memberCard-bottom {
          display: flex;
          align-items: center;
          text-align: center;
          position: absolute;
          top: 150px;
          left: 20px;
          right: 20px;
          font-size: 24px;
          .memberCard-att {
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            flex-shrink: 0;
            padding: 0 10px;
          }
          .memberCard-btn {
            margin-left: 40px;
            flex-shrink: 0;
            padding: 10px;
            border-radius: 10px;
            display: flex;
            align-items: center;
          }
          .memberCard-btnG {
            background-color: #13d063;
          }
          .memberCard-btnY {
            background-color: #fda72c;
          }
          .memberCard-btn img {
            width: 25px;
            height: 25px;
            margin-right: 6px;
          }
        }
      }
      .memberCard:nth-child(2) {
        margin-left: 20px;
        box-shadow: 10px 15px 20px #ffe7e2;
      }
    }

    .memberAll {
      font: bold 32px '微软雅黑';
      padding: 30px 0;
    }
    /* 列表样式 */
    .memberAll-list {
      display: flex;
      align-items: center;
      background-color: #fff;
      .memberAll-list-left {
        display: flex;
        flex-grow: 1;
        align-items: center;
        /* justify-content: center; */
      }
      .picture {
        width: 120px;
        height: 120px;
      }
      .picture img {
        width: 100%;
        height: 100%;
      }
      .memberList-type {
        margin: 20px 40px;
      }
      .memberList-type-title {
        font: 400 30px 微软雅黑;
      }
      .memberList-type-att {
        display: flex;
        font-size: 25px;
      }
      .memberList-type-att div:nth-child(odd) {
        color: #999999;
      }
      .memberList-type-att div:nth-child(3) {
        margin-left: 20px;
      }
      .memberList-type-per {
        color: #858585;
        font-size: 25px;
        display: flex;
        align-items: center;
      }
      .memberList-type-per img {
        width: 24px;
        height: 30px;
        margin-right: 15px;
      }

      /* 修改好的 */
      .memberList-btn {
        color: #fa7025;
        border: 2px solid #fa7025;
        font-size: 30px;
        padding: 10px 20px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-items: flex-end;
      }
      .memberList-btn img {
        width: 25px;
        height: 25px;
        margin-right: 6px;
      }
    }
    .wire {
      margin-left: 145px;
      border: 1px solid #dfdfdf;
    }
    .unfold {
      color: #999999;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px 0;
      font-size: 25px;
      img {
        margin-left: 10px;
        width: 30px;
        height: 16px;
      }
      img.active {
        transform: rotate(180deg);
      }
    }
  }
  /* 小组话题标题部分 */
  .topic {
    margin-top: 20px;
    padding: 0 26px;
    background-color: #fff;
    font-size: 30px;
    .topicTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0 0 0;
    }
    .topicTitle-left {
      font: bold 32px '微软雅黑';
    }
    .topicTitle-right {
      display: flex;
      align-items: center;
      font: 400 25px '微软雅黑';
    }

    .topicTitle-right img {
      width: 30px;
      height: 20px;
      padding-left: 10px;
    }

    /* 小组话题内容部分 */
    .topicContent {
      display: flex;
      box-sizing: border-box;
      overflow: hidden;
      margin: 20px 0;
    }
    .topicImg {
      width: 150px;
      height: 100%;
      padding-right: 20px;
      position: relative;
    }
    .topicImg img {
      width: 100px;
      height: 100px;
    }
    .topicImg div {
      display: none;
    }
    .news div {
      display: block;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background-color: #ff3710;
      color: white;
      width: 30px;
      height: 30px;
      padding: 5px;
      position: absolute;
      top: 0px;
      right: 10px;
    }
    .topicContent-right {
      border-bottom: 1px solid #b7b7b7;
    }
    .topicContent-title {
      display: flex;
      align-items: center;
    }
    .topicContent-name {
      color: #575757;
    }
    .topicContent-class {
      box-sizing: border-box;
      color: #6acc88;
      border-radius: 10px;
      border: 1px solid #6acc88;
      padding: 2px 10px;
      font-size: 25px;
      margin-left: 10px;
    }
    .topicContent-text {
      margin: 20px 0;
    }
    .answer {
      background-color: #f1f5f8;
      padding: 20px;
    }
    .answer-top {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .answer-top-left {
      color: #55749e;
      flex-grow: 1;
    }
    .answer-top-right img {
      width: 30px;
      height: 30px;
    }
    .answerContent {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin-top: 20px;
    }
    .answerContent-left {
      width: 60px;
      height: 100%;
      margin-right: 20px;
    }
    .answerContent-left img {
      width: 60px;
      height: 60px;
    }
    .answerContent-right {
      flex-grow: 1;
      border-bottom: 1px solid #e8e8e8;
      font-size: 25px;
    }
    .borderNone {
      border: none;
    }
    .answerContent-rightTitle {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: space-between;
    }
    .answerContent-name {
      font-size: 28px;
      color: #575757;
    }
    .answerContent-time {
      color: #a2a2a2;
      font-size: 20px;
    }
    .answerContent-text {
      padding: 20px 0 30px 0;
    }
    .answerContent-text div:first-child {
      float: left;
    }
    .answerContent-textName {
      float: left;
      color: #7384b4;
    }
    /* 查看更多 */
    .viewMore {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #6c91c7;
      font-size: 25px;
    }
    .viewMore div {
      font: 400 25px '宋体';
    }

    /* 来自课程样式 */
    .answerCourse {
      margin: 20px 0;
      padding: 10px 20px;
      background-color: #f1f5f8;
      font-size: 25px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .answerCourse-left {
      flex-grow: 1;
    }
    .answerCourse-left div {
      padding: 8px 0;
    }
    .answerCourse-right {
      width: 120px;
      height: 90px;
    }
    .answerCourse-right img {
      width: 100%;
      height: 100%;
    }

    .topicContent-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 40px 0 20px 0;
    }
    .topicContent-footTime {
      color: #b7b7b7;
    }
    .topicContent-foot img {
      width: 25px;
      height: 25px;
      padding-right: 10px;
    }
  }
}
</style>